<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas-ribbon.js</title>
</head>

<body>
    <script type="text/javascript" src="canvas-ribbon.js"></script>
    <script type="text/javascript">
        new Ribbons({
            // ribbon color HSL saturation amount
            colorSaturation: "80%",
            // ribbon color HSL brightness amount
            colorBrightness: "50%",
            // ribbon color opacity amount
            colorAlpha: 0.6,
            // how fast to cycle through colors in the HSL color space
            colorCycleSpeed: 12,
            // where to start from on the Y axis on each side (top|min, middle|center, bottom|max, random)
            verticalPosition: "center",
            // how fast to get to the other side of the screen
            horizontalSpeed: 1,
            // how many ribbons to keep on screen at any given time
            ribbonCount: 3,
            // add stroke along with ribbon fill colors
            strokeSize: 0,
            // move ribbons vertically by a factor on page scroll
            parallaxAmount: -0.5,
            // add animation effect to each ribbon section over time
            animateSections: true
        });
    </script>

</body>

</html>